<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      overflow: hidden;
    }
    .arrows {
      margin: 300px;
      position: relative;
    }
    .arrow {
      text-align: center;
      line-height: 50px;
      width: 50px;
      height: 50px;
      border: 1px solid cadetblue;
      border-radius: 5px;
    }
    div.arrow:not(:first-child) {
      position: absolute;
      top: 60px;
    }
    .left {
      left: -60px;
    }
    .right {
      left: 60px;
    }
  </style>
</head>
<body>
  <div class="arrows">
    <div class="arrow up" data-key="ArrowUp">上</div>
    <div class="arrow down" data-key="ArrowDown">下</div>
    <div class="arrow left" data-key="ArrowLeft">左</div>
    <div class="arrow right" data-key="ArrowRight">右</div>
  </div>
</body>
</html>

<script>
const arrows = document.querySelectorAll('.arrows > div');


document.addEventListener('keydown', e => {
  // if (e.key === 'ArrowDown') {
  //   // 表示 点击的是 键盘的  ↓
  // }
  arrows.forEach((arrow) => {
    if (e.key === arrow.dataset.key) {
      // 
      arrow.style.backgroundColor = 'red';
    }
    // console.log('e', e, arrow.dataset.key);
  })

})

document.addEventListener('keyup', e => {
  // 但凡 键盘 up， 给所有的 arrow background 设为 white
    // 不管它是不是 red
  arrows.forEach(arrow => {
    arrow.style.backgroundColor = 'white';
  })
})


</script>